<template>
    <view>
        <view class="backgroundSty">
            <view class="advisoryList_swiper">  
                <view :class="[ 'tab', currentTab==0 ? 'on' : ' ']" data-current="0" @click="swichNav">待回复</view>  
                <view :class="[ 'tab', currentTab==1 ? 'on' : ' ']" data-current="1" @click="swichNav">待结束</view>  
                <view :class="[ 'tab', currentTab==2 ? 'on' : ' ']" data-current="2" @click="swichNav">已完成</view>
                <view :class="[ 'tab', currentTab==3 ? 'on' : ' ']" data-current="3" @click="swichNav">已退款</view> 
                <view :class="[ 'tab', currentTab==4 ? 'on' : ' ']" data-current="4" @click="swichNav">全部</view>     
            </view> 
            <view  class="advisoryList_cnt" v-if="advisoryList.length > 0" >
                <view class="advisoryList" v-for="item in advisoryList" :for-item="item" :key="item.year">
                    <view class="advisoryList_head">{{item.year}}年 (共{{item.list.length}}次)</view>
                    <view v-for="data in item.list"  :for-item="data" :key="data.orderId">
                        <view class="advisoryList_question">
                            <uni-row class="row" >
                                <uni-col span="60"><view class="question">{{data.question}}</view></uni-col>
                                <uni-col span="40">
                                    <view class="status">
                                        <text v-if="data.state =='1'|| data.state =='4'" style="background-color: #ffaa22;" ></text>
                                        <text v-if="data.state =='2'" style="background-color: #499dff;" ></text>
                                        <text v-if="data.state =='3'" style="background-color: #999999;" ></text>{{data.stateText}}
                                    </view>
                                </uni-col>
                            </uni-row>
                        </view>
                        <view class="advisoryList_info">
                            <uni-row class="row" >
                                <uni-col span="75">
                                    <image  mode='aspectFill' class="usr-avatar" :src="data.headPic"></image>
                                    <view class="doctor-info">
                                        <view class="name"><text>{{data.doctorName}}</text>{{data.deptName}} | {{data.titles}}</view>
                                        <view>患者姓名：{{data.patientName}}</view>
                                        <view>{{data.createTime}}</view>
                                    </view>
                                </uni-col>
                                <uni-col span="25">
                                    <view class="pay">
                                        <view class="price"><text>￥</text>{{data.money}}</view>
                                        <view class="btn-detail" :data-orderId="data.orderId" @click="goToVisitDetail">查看详情</view>
                                    </view>
                                </uni-col>
                            </uni-row>
                        </view>
                    </view>
                </view>  
            </view>
        </view>
        <view v-if="advisoryList.length == 0 && showLoading" class="noData">
            <image  mode='aspectFill' src="../../../static/images/noData.png" class="noData-pic"></image>
            <view>抱歉，暂无更多咨询记录，</view>
            <view>请进行【图文咨询】后查看</view>
        </view>
    </view>
</template>

<script>
    import uniRow from '@/components/uni-ui/uni-layout/row.vue'
    import uniCol from '@/components/uni-ui/uni-layout/col.vue'
    import moment from '@/common/util/moment.min.js'
    import _ from '@/common/util/underscore.js'
    import API from '@/utils/api.js'
    export default {
    	data() {
    		return {
                currentTab: 0,// tab切换  
                showLoading:false,//请求之后才有这个状态
                advisoryList: []
    		}
    	},
    	components:{
            uniRow,uniCol
    	},
    	onLoad() {
    		this.fetchData();
    	},
    	methods: {
            /* 点击tab切换*/
            swichNav: function (e) {
                var that = this;
                if (this.currentTab === e.target.dataset.current) {
                    return false;
                } else {
                    this.currentTab = e.target.dataset.current
                    this.fetchData();
                }
            },
            //请求数据
            fetchData: function() {
                let self = this;
                uni.showLoading({
                    title: '加载中',
                });
                let param = {
                    hospitalId: uni.getStorageSync('hospitalId'),
                    patientUserId: uni.getStorageSync('patientUserId'),
                    state: parseInt(this.currentTab) + 1 == 5 ? "" : (parseInt(this.currentTab) + 1)+""
                };
                API.queryOrder(param).then((res) => {
                    uni.hideLoading();
                    if (res.success == true) {
                        let renderData = res.entity;
                        for (let i in renderData) {
                            let list = renderData[i].list;
                            _.map(list, function (el) { 
                                el.createTime = el.createTime == null ? "" : el.createTime;
                                el.doctorName = el.doctorName == null ? "" : el.doctorName;
                                el.patientName = el.patientName == null ? "" : el.patientName;
                                el.deptName = el.deptName == null ? "" : el.deptName;
                                el.question = el.question == null ? "" : el.question;
                                el.money = el.money == null ? 0 : el.money;
                                el.titles = el.titles == null ? "" : el.titles;
                                if (el.headPic == '' || el.headPic == null) {
                                    el.headPic = 'https://ylz-wlzs-test.obs.cn-north-1.myhuaweicloud.com:443/1578537072939';
                                }
                                //1、待回复 2、待结束 3、已完成 4、已退款
                                switch (el.state) {
                                    case "1":
                                        return el.stateText = "待回复";
                                        break;
                                    case "2":
                                        return el.stateText = "待结束";
                                        break;
                                    case "3":
                                        return el.stateText = "已完成";
                                        break;
                                    case "4":
                                        return el.stateText = "已退款";
                                        break;
                                }
        
                                return list; 
                            });
                        }
                        self.advisoryList =renderData,
                        self.showLoading = true
        
                    }
                })
            },
            //详细页
            goToVisitDetail: function(e) {
                console.log(e.currentTarget.dataset)
                uni.navigateTo({
                    url: '/pages/consultation/advisoryDetails/index?orderId=' + e.currentTarget.dataset.orderid,
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .backgroundSty{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
    /* 标签头 */
    .advisoryList_swiper{  
        width: 100%;  
        text-align: center;  
        line-height:96rpx;
        position:fixed;
        top:0;
        left: 0;
        z-index: 3;
        background: #fff;
        .tab{
            font-size: 28rpx;  
            display: inline-block;  
            width: 20%;  
        	letter-spacing: 2rpx;
            color: #555555;
        }  
        .on{
            color: #499dff;
            font-weight: bold;
            border-bottom: 6rpx solid #499dff;
        }  
    } 
    // 内容
    .advisoryList_cnt{
        padding-top: 150rpx;
        background: #EFEFF4;
        .advisoryList {
            padding-bottom: 50rpx;
            background: #EFEFF4;
        }
        .advisoryList_head{
            letter-spacing: 2rpx;
        	color: #9e9e9e;
            font-size: 24rpx;
            padding-left: 33rpx;
            margin-bottom: 20rpx;
        }
        .advisoryList_question{
            background: #f7f7f8;
            font-size: 26rpx;
            line-height: 80rpx;
            color: #000000;
        }
        .question{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
            padding-left: 34rpx;
            text-overflow: ellipsis;  
        }
        .status{
            text-align: right;
            position: relative;
            padding-right: 30rpx;
            text{
                position: absolute;
                top: 36rpx;
                right: 126rpx;
                width: 8rpx;
                height: 8rpx;
                border-radius: 50%;
                background-color: #ff3300;
            }
        }
        .advisoryList_info{
            padding: 30rpx 0rpx;
            background: #fff;
        }
        .advisoryList_info .usr-avatar {
            border-radius: 50%;
            width: 114rpx;
            height: 114rpx;
            margin-left: 35rpx;
            margin-right:20rpx;
        }
        .advisoryList_info .doctor-info {
            font-size: 24rpx;
            letter-spacing: 2rpx;
        	color: #a6a6a6;
            display: inline-block;
        }
        .advisoryList_info .doctor-info .name text {
            color: #000000;
            font-size: 30rpx;
            font-weight: bold;
            margin-right: 20rpx;
        }
        .advisoryList_info .doctor-info view{
            margin-top: 4rpx;
        }
        .advisoryList_info .pay{
            text-align: right;
            margin-right: 35rpx;
        }
        .advisoryList_info .pay .price{
            color: #499dff;
            font-size: 32rpx;
        	font-weight: bold;
        }
        .advisoryList_info .pay text{
            font-size: 24rpx;
            font-weight: normal;
        }
        .advisoryList_info .btn-detail {
            width:100%;
            height: 48rpx;
            text-align: center;
            background-color: #fff;
            border-radius: 24rpx;
            border: solid 1rpx #499dff;
            font-size: 24rpx;
            line-height: 44rpx;
            letter-spacing: 0px;
            color: #499dff;
            box-sizing: border-box;
            margin-top: 23rpx;
        }
    }
    
    
    

</style>
